<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<form class="layui-form" id="pageSubmit" method="post">
    <input type="hidden" id="currentPage" name="currentPage">

    <fieldset class="layui-elem-field">
        <legend>限额查询</legend>

    <div class="layui-field-box">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">限额名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="lmtName" autocomplete="off"
                           placeholder="请输入"
                           class="layui-input" value="${params.lmtName!''}">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">限额类型</label>
            <div class="layui-input-inline">
                <select id="lmttype" name="lmtType" value="${params.lmtType!''}">
                    <option value="">请选择</option>
                    <option value="仓库库存">仓库库存</option>
                    <option value="预算限额">预算限额</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否可用</label>
            <div class="layui-input-inline"  value="${params.isUsed!''}">
                <select id="isused" name="isUsed">
                    <option value="">请选择</option>
                    <option value="y">是</option>
                    <option value="n">否</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="Form">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </div>
</form>


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>限额信息</legend>
</fieldset>
<div class="layui-form">
    <table class="layui-table">
        <colgroup>
            <col width="180">
            <col width="250">
            <col width="250">
            <col width="250">
            <col width="120">
            <col width="100">
        </colgroup>
        <thead>
        <tr>
            <th>ID</th>
            <th>限额编号</th>
            <th>限额名称</th>
            <th>限额类型</th>
            <th>限额数值</th>
            <th>是否可用</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <#list list as item>
        <tr>
            <td>${item.id!''}</td>
            <td>${item.lmt_no!''}</td>
            <td>${item.lmt_name!''}</td>
            <td>${item.lmt_type!''}</td>
            <td>
            ${item.lmt_count!''}
            </td>
            <td>
            ${item.is_used!''}
            </td>
            <td>
                <div class="layui-btn-group">
                    <button type="button" value="${item.id!''}"
                            class="layui-btn layui-btn-small detail">
                        <i class="layui-icon">详情</i>
                    </button>
                </div>
            </td>
        </tr>
        </#list>
        </tbody>
    </table>
</div>


<div class="layui-form">
    <span id="form_page"></span>&nbsp;共${page.total}条数据
</div>

<script type="text/javascript" src="/static/layui/layui.js"></script>
<script>
    layui.use(['element', 'form', 'layer', 'jquery', 'laypage', 'laydate'], function () {
        var element = layui.element();
        var form = layui.form();
        var layer = layui.layer;
        var laypage = layui.laypage;
        var $ = layui.jquery;
        var laydate = layui.laydate;

        var pindex = "${page.pageNum}";// 当前页
        var ptotalpages = "${page.pages}";// 总页数
        var pcount = "${page.total}";// 数据总数


        //        优惠类型动态赋值
        var lmtType = "${params.lmtType!''}";
        //        条件查询动态赋值
        var  isUsed= "${params.isUsed!''}";
        //带回页面的select参数进行动态赋值
        // 优惠类型动态赋值
        $("#lmttype").find("option[value ='" + lmtType + "']").attr("selected", "selected");
        $("#isused").find("option[value ='" + isUsed + "']").attr("selected", "selected");
        // 条件查询动态赋值
        // 重新渲染页面
        form.render();

        // 分页
        laypage({
            cont: 'form_page', // 页面上的id
            pages: ptotalpages,//总页数
            curr: pindex,//当前页。
            skip: true,
            jump: function (obj, first) {
                $("#currentPage").val(obj.curr);//设置当前页
                //防止无限刷新,
                //只有监听到的页面index 和当前页不一样是才出发分页查询
                if (obj.curr != pindex) {
                    console.log(pindex)
                    $("#pageSubmit").submit();
                } else {
                    $("#currentPage").val(1);
                }
            }
        });


        // 监听查询提交按钮
        form.on('submit(Form)', function (data) {
            $.ajax({
                url: "/limit/lmt",//后台程序地址
                type: "POST",
                data: data.field,  //需要post的数据
                success: function (data) {
                }
            });
        });


//        详情弹出窗
        $(".detail").on("click", function () {
            var id = this.value;
            layer.open({
                title: '限额信息',
                area: ['450px', '430px'],
                type: 2,
                content: '/limit/selectById?id='+id
            });
        });
    });
</script>
</body>
</html>